<template>
  <view :data-theme="globPrimary">
    <u-navbar title="我的订单" :z-index="20075" :custom-back="onBack">
      <view slot="right" class="navbar-right">
        <u-icon
          name="shaixuan"
          custom-prefix="edu-icon"
          size="40"
          :color="globPrimaryColor"
          @click="showPopup = !showPopup"
        ></u-icon>
      </view>
    </u-navbar>
    <div class="order-tabs" :style="{ top: globNavbarHeight + globStatusBarHeight + 'px' }">
      <u-tabs
        :list="tabList"
        :is-scroll="false"
        :current="current"
        :activeColor="globPrimaryColor"
        @change="tabChange"
      ></u-tabs>
    </div>
    <view class="order-tabs-placeholder"></view>
    <mescroll-body
      ref="mescrollRef"
      :height="mescrollHeight"
      @init="mescrollInit"
      @down="downCallback"
      @up="getdataInfo"
    >
      <orderItem :list="orderList" @update="OnUpdate"></orderItem>
    </mescroll-body>

    <!-- 时间筛选弹出层 -->
    <u-popup v-model="showPopup" mode="top">
      <view :style="[popupStyle]"></view>
      <view class="exam-model-title">按时间筛选</view>
      <view class="exam-model-list">
        <view
          class="category-item u-line-1"
          v-for="(item, index) in options"
          :key="index"
          :class="[{ active: value == item.value }]"
          @click="handleOptions(item.value)"
        >
          {{ item.name }}
        </view>
      </view>
      <view class="u-flex order-model-bottom">
        <view class="left">
          <button class="btn u-fix-ios-appearance u-border-top" @click="onOptionsDelete">
            清空筛选
          </button>
        </view>
        <view class="right">
          <edu-button type="primary" @click="onOptionsConfirm">确定</edu-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
import orderItem from './components/order-item.vue'
import { mapGetters } from 'vuex'
export default {
  mixins: [MescrollMixin],
  components: {
    orderItem,
  },
  data() {
    return {
      tabList: [
        {
          name: '全部',
          type: 'all',
        },
        {
          name: '已支付',
          type: 'finish',
        },
        {
          name: '待支付',
          type: 'waiting',
        },
        {
          name: '已取消',
          type: 'cancel',
        },
      ],
      value: '',
      currentValue: '',
      options: [
        {
          value: '1week',
          name: '一周内',
        },
        {
          value: '1month',
          name: '1个月内',
        },
        {
          value: '3month',
          name: '3个月内',
        },
        {
          value: '6month',
          name: '6个月内',
        },
        {
          value: 'this_year',
          name: '今年',
        },
        {
          value: 'earlier',
          name: '更早',
        },
      ],
      type: 'all',
      current: 0,
      showPopup: false,
      orderList: [],
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
    globWindowHeight() {
      return this.$u.sys().windowHeight
    },
    mescrollHeight() {
      let height = this.globWindowHeight - this.globNavbarHeight - this.globStatusBarHeight - 42
      return `${height}px`
    },
    popupStyle() {
      let style = {}
      style.width = '100%'
      style.height = this.globNavbarHeight + this.globStatusBarHeight + 'px'
      return style
    },
  },
  options: { styleIsolation: 'shared' },
  // 监听页面返回
  onBackPress(options) {
    if (options.from === 'navigateBack') {
      return false
    }
    this.onBack()
    return true
  },
  onLoad(options) {
    if (!this.$u.test.empty(options)) {
      this.current = Number(options.type)
      this.type = this.tabList[options.type].type
    }
  },
  onShow() {
    this.OnUpdate()
  },
  methods: {
    getdataInfo(page) {
      this.$edu.api
        .getOrderList(this.type, {
          date: this.currentValue,
          page: page.num,
          count: page.size,
        })
        .then((res) => {
          const { data } = res
          if (page.num == 1) this.orderList = []
          this.orderList = this.orderList.concat(data.data)
          this.mescroll.endSuccess(data.data.length)
        })
    },
    // tab切换
    tabChange(index) {
      this.orderList = []
      this.current = index
      this.type = this.tabList[index].type
      this.mescroll.resetUpScroll()
    },
    // 选择筛选
    handleOptions(val) {
      this.value = val
    },
    // 清空筛选
    onOptionsDelete() {
      this.showPopup = false
      this.value = ''
      if (!this.$u.test.empty(this.currentValue)) {
        this.currentValue = ''
        this.mescroll.resetUpScroll()
      }
    },
    // 确认筛选
    onOptionsConfirm() {
      this.showPopup = false
      if (!this.$u.test.empty(this.value) && this.currentValue != this.value) {
        this.currentValue = this.value
        this.mescroll.resetUpScroll()
      }
    },
    // 更新列表
    OnUpdate() {
      if (this.mescroll) {
        this.mescroll.scrollTo(0, 0)
        this.mescroll.resetUpScroll()
      }
    },
    // 返回上一页
    onBack() {
      this.$u.route({ type: 'switchTab', url: 'pages/user/index' })
    },
  },
}
</script>
<style lang="scss">
page {
  background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
.navbar-right {
  margin-right: 30rpx;
  display: flex;
  align-items: center;
}
.order-tabs {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 99;
}
.order-tabs-placeholder {
  height: 82rpx;
}
.centre {
  text-align: center;
  margin: 200rpx auto;
  font-size: 32rpx;

  image {
    width: 164rpx;
    height: 164rpx;
    border-radius: 50%;
    margin-bottom: 20rpx;
  }

  .tips {
    font-size: 24rpx;
    color: $edu-tips-color;
    margin-top: 20rpx;
  }

  .btn {
    margin: 80rpx auto;
    width: 200rpx;
    border-radius: 32rpx;
    line-height: 64rpx;
    color: #ffffff;
    font-size: 26rpx;
    background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
  }
}

.swiper-box {
  flex: 1;

  /deep/.uni-swiper-wrapper {
    z-index: 981;
  }
}

.swiper-item {
  height: 100%;
}

.exam-model-title {
  font-size: 28rpx;
  font-weight: 400;
  color: #909399;
  padding: 0 30rpx;
  margin-top: 30rpx;
}

.exam-model-list {
  padding: 0 6rpx 30rpx 30rpx;
  display: flex;
  flex-wrap: wrap;
  .category-item {
    height: 64rpx;
    background: #f7f7f7;
    border-radius: 32rpx;
    margin-top: 28rpx;
    margin-right: 24rpx;
    font-size: 28rpx;
    color: #606266;
    line-height: 64rpx;
    text-align: center;
    padding: 0 10rpx;
    width: 206rpx;
    &.active {
      @include text-color();
    }
  }
}

.order-model-bottom {
  .left {
    flex: 1;
  }
  .right {
    flex: 1;
  }
  .btn {
    padding: 0;
    font-size: 30rpx;
    color: #606266;
    font-size: 30rpx;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #ffffff;
  }
  ::v-deep button {
    border-radius: 0;
  }
  ::v-deep button:after {
    border-radius: 0;
  }
}
</style>
